import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-components';
import { Button, Card, DatePicker, Form, Row, Select } from 'antd';
import { connect } from 'umi';
import { BASE_URL } from '@/utils/url';
const { RangePicker } = DatePicker;

/**
 * 检测日志生成界面
 */

class JournalManager extends Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.downloadLink = React.createRef();
  }



  submitFormVal() {
    let formData = {};
    try {
      const getFormData = this.formRef.current.getFieldsValue();
      let { startTime, endTime, monitor } = getFormData
      startTime = startTime.format('YYYY-MM-DD HH-mm-ss');
      endTime = endTime.format('YYYY-MM-DD HH-mm-ss');
      const downloadLink = this.downloadLink.current
      downloadLink.href = `${BASE_URL}/aiModels/download?startTime=` + startTime + `&endTime=` + endTime + `&monitor=` + monitor
      console.log('this', this)
      // 触发点击事件开始下载
      downloadLink.click();
    } catch (e) {
      formData = undefined;
    }


  }

  resetFiles() {
    this.formRef.current.resetFields();
  }



  render() {
    const config = {
      rules: [
        {
          type: 'object',
          required: true,
          message: '请输入时间',
        },
      ],
    };
    return (
      <PageHeaderWrapper>
        <Card title="生成日志报告">
          <Row>
            <Form layout="inline" style={{ marginBottom: 20 }} ref={this.formRef} onValuesChange={(v, a) => { console.log(v, a) }}>
              <Form.Item name="startTime" label="开始时间" {...config}>
                <DatePicker showTime />
              </Form.Item>
              <Form.Item name="endTime" label="结束时间" {...config}>
                <DatePicker showTime />
              </Form.Item>
              <Form.Item name="monitor" label="断面选择">
                <Select style={{ width: 150 }}>
                  <Select.Option value='123'>断面一 </Select.Option>
                  <Select.Option value='12222'>断面二 </Select.Option>
                  <Select.Option value='1122'>断面三 </Select.Option>
                </Select>
              </Form.Item>
              <Button type="primary" htmlType="submit" style={{ marginRight: 20 }} onClick={() => { this.submitFormVal() }}>
                导出日志报告
              </Button>
              <Button htmlType="button" onClick={() => { this.resetFiles() }}>重置</Button>
            </Form>
          </Row>
        </Card>
        <a hidden ref={this.downloadLink} />
      </PageHeaderWrapper>
    );
  }
}

export default connect(({ }) => ({}),
  (dispatch) => {
    return { dispatch };
  },
  null,
  { forwardRef: true },)(JournalManager)